import React,{Component} from 'react';
import '../assets/css/index.css';

//引入自定义模块
import storage from '../model/storage';

class Todolist extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            username:"111",
            list: [
                // {
                //   title: '录制nodejs',
                //   checked: true
                // },
                // {
                //   title: '录制ionic',
                //   checked: false
                // },
                // {
                //     title: '录制nodejs11',
                //     checked: true
                // },
                // {
                //     title: '录制ionic1',
                //     checked: false
                // }
            ]
        };
    }
    addData=(e)=>{
        if(e.keyCode === 13){
            console.log(this.refs.title.value);
            var tempList=this.state.list;  /*获取list的值*/
            console.log('tempList',tempList)
            var obj = {
                title: this.refs.title.value,
                checked: false
            }
            tempList.push(obj);
            this.setState({  /*改变数据*/
                list:tempList
            })
            //表单置为空
            this.refs.title.value='';
            //执行缓存数据
            // localStorage.setItem('todolist',JSON.stringify(temp));
            storage.set('todolist',tempList);
        }
    }        
    removeData=(key)=>{
        // alert(key)
        var tempList=this.state.list;  /*获取list的值*/
        tempList.splice(key,1);
        this.setState({  /*重新复制*/
            list:tempList
        })
        //执行缓存数据
        // localStorage.setItem('todolist',JSON.stringify(tempList));
        storage.set('todolist',tempList);
    }
    checkboxChange=(key,checked)=>{
        console.log(key,checked)
        var tempList=this.state.list;
        tempList[key].checked=!checked;
        this.setState({
            list:tempList
        })
        //执行缓存数据
        // localStorage.setItem('todolist',JSON.stringify(tempList));
        storage.set('todolist',tempList);
    }
    //生命周期函数  页面加载就会触发
    componentDidMount(){
        //获取缓存的数据
        // var todolist=JSON.parse(localStorage.getItem('todolist'));   /*字符串*/
        var todolist=storage.get('todolist');
        if(todolist){
            this.setState({
                list:todolist
            })
        }
    }

    render() {
        return (
            <div>
                <header className="title">TodoList: 　<input ref="title" onKeyUp={this.addData} /> </header>
                {/* <button onClick={this.addData}>+增加</button> */}
                <br />
                <h2>待办事项</h2>
                <ul>
                    {
                        this.state.list.map((value,key) => {
                            if(!value.checked){
                                return(
                                    <li key={key}>
                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this,key,value.checked)}/>
                                        {value.title}  
                                        ----- 
                                        <button onClick={this.removeData.bind(this,key)}>删除</button> 
                                    </li>
                                )
                            }
                        })
                    }
                </ul>
                <h2>已完成</h2>
                <ul>
                    {
                        this.state.list.map((value,key)=>{
                            if(value.checked){
                                return(
                                    <li key={key}>
                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this,key,value.checked)}/>
                                        {value.title}  
                                        ----- 
                                        <button onClick={this.removeData.bind(this,key)}>删除</button> 
                                    </li>                                        
                                )
                            }
                        })
                    }
                </ul>
            </div>
        );
    }

}

export default Todolist;